<!--
 * @Description: 我的tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: LALA
 * @LastEditTime: 2022-01-06 14:02:52
-->
<template>
  <div class="user">
    <div class="header">
      <div class="photo">
        <van-uploader
          multiple
          :max-count="1"
          result-type="file"
          :after-read="afterRead"
        >
          <!-- 默认头像 -->
          <img :src="info.user_face" alt="" />
        </van-uploader>
      </div>
      <div class="name">{{ info.name }}</div>
    </div>
    <van-cell-group>
      <van-cell title="账号" value="worker1" />
      <van-cell title="姓名" value="芽芽" />
      <van-cell title="性别" value="男" />
      <van-cell title="生日" value="2021-01-7" />
      <van-cell title="电话" value="17873245001" />
    </van-cell-group>
    <van-cell title="所有订单" is-link to="/manager/order" />
    <div class="btn" @click="logoutHandler">退出</div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import axios from "axios";
import { patch } from "../../utils/request";
export default {
  methods: {
    ...mapActions("user", ["logout", "getInfo"]),
    logoutHandler() {
      this.logout();
    },
    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          // 更新用户头像
          file.status = "success";
          // 新头像地址
          let user_face =
            "http://121.199.29.84:8888/group1/" + response.data.data.id;
          let params = {
            id: this.info.id + "",
            user_face,
          };
          let url = "/user/updateUserFace";
          patch(url, params).then((resp) => {
            Toast.success(resp.message);
            // 刷新用户信息 - 状态机
            this.getInfo();
          });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
  },
  computed: {
    ...mapState("user", ["info"]),
  },
};
</script>

<style scoped>
/* .user {
  height: 600px;
} */
.header {
  padding-top: 46px;
  text-align: center;
  background: #9e2828;
  margin-bottom: 2em;
}

.header .photo {
  margin: 0 auto;
  width: 10em;
  height: 10em;
  border-radius: 5px;
  box-sizing: border-box;
  /* border: 1px solid #619edf; */
  overflow: hidden;
  padding: 1em;
}
.header .name {
  line-height: 3em;
  font-size: 16px;
  color: #ffffff;
}
.header .photo img {
  width: 100%;
}

.btn {
  width: 90%;
  margin: 3.5em auto;
  line-height: 3em;
  text-align: center;
  border: 1px solid #9e2828;
  border-radius: 1.5em;
}
</style>